<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>文档帮助</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="/css/font-awesome.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <link rel="stylesheet" href="/css/index.css">
        <script type="text/javascript" th:src="@{/js/jquery-easyui-1.5.3/jquery.min.js}" ></script>
        <script src="/js/layui/layui.all.js"></script>
        <script src="/js/xadmin.js"></script>
        <script type="text/javascript" th:src="@{/js/common/ComJsonUtil.js}" ></script>
        <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
    </head>
    <body>

    <div class="x-body layui-anim layui-anim-up" id="app">
        <div>
            <blockquote class="layui-elem-quote" >欢迎使用
            <span class="x-red"></span>！当前时间:{{TodayDateInfo}}</blockquote>
        </div>
        <fieldset class="layui-elem-field">
            <legend>词频统计(没有介/副/连/叹/代词)</legend>
            <div class="layui-field-box">
                <el-input-number
                        v-model="top_num" controls-position="right"  :min="5"
                        clearable placeholder="词频前几名" style="width: 150px;" class="filter-item" @keyup.enter.native="to_wordDemoFun"></el-input-number>
                <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="to_wordDemoFun">重新生成</el-button>
                <div id="main1" style="width: 100%;height:400px;"></div>
                <div id="main2" style="width: 100%;height:400px;"></div>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>智能摘抄</legend>
            <div class="layui-field-box">
                <el-form ref="pojo_form" :inline="true" :model="txt_info"  size="medium" >
                    <el-form-item>
                        <el-input-number
                                v-model="txt_info.abstract_num" controls-position="right"  :min="200"
                                clearable placeholder="摘要字数" style="width: 150px;" class="filter-item" @keyup.enter.native="to_getAbstract"></el-input-number>
                        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="to_getAbstract">重新生成摘要</el-button>
                    </el-form-item>
                    <br/>
                    <el-form-item label="摘要" prop="abstract">
                            <el-input
                                    type="textarea"
                                      :rows="4"
                                      v-model="txt_info.abstract"
                                      v-loading="formLoading_abstract"
                                      element-loading-background="rgba(0, 0, 0, 0.5)"
                                      element-loading-text="数据正在清洗中"
                                    style="width: 600px"
                            ></el-input>
                    </el-form-item>
                    <br/>
                    <el-form-item>
                        <el-input-number
                                v-model="txt_info.phrase_num" controls-position="right"  :min="10"
                                clearable placeholder="短语个数" style="width: 150px;" class="filter-item" @keyup.enter.native="to_getPhrase"></el-input-number>
                        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="to_getPhrase">重新生成短语</el-button>
                    </el-form-item>
                    <br/>
                    <el-form-item label="短语" prop="phrase">
                        <el-input type="textarea"
                                  :rows="4"
                                  v-model="txt_info.phrase"
                                  v-loading="formLoading_phrase"
                                  element-loading-background="rgba(0, 0, 0, 0.5)"
                                  element-loading-text="数据正在清洗中"
                                  style="width: 600px"
                        ></el-input>
                    </el-form-item>
                    <br/>
                    <el-form-item>
                        <el-input-number
                                v-model="txt_info.keyWords_num" controls-position="right"  :min="5"
                                clearable placeholder="关键字个数" style="width: 150px;" class="filter-item" @keyup.enter.native="to_getKeyWords"></el-input-number>
                        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="to_getKeyWords">重找关键字</el-button>
                    </el-form-item>
                    <br/>
                    <el-form-item label="关键字" prop="keyWords">
                        <el-input type="textarea"
                                  :rows="4"
                                  v-model="txt_info.keyWords"
                                  v-loading="formLoading_keyWords"
                                  element-loading-background="rgba(0, 0, 0, 0.5)"
                                  element-loading-text="数据正在清洗中"
                                  element-loading-spinner="el-icon-loading"
                                  style="width: 600px"
                        ></el-input>
                    </el-form-item>
                    <br/>
                    <el-form-item label="名称" prop="seg">
                        <el-input type="textarea"
                                  :rows="8"
                                  v-model="txt_info.seg" style="width: 1200px"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>词云生成</legend>
            <div class="layui-field-box">

            </div>
        </fieldset>

    </div>
    </body>

    <script type="text/javascript" th:src="@{/js/axios.js}" ></script>
    <script type="text/javascript" th:src="@{/js/vue.js}"></script>
    <script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/echarts/3.3.2/extension/bmap.min.js" type="text/javascript"></script>
    <!--<script type="text/javascript" th:src="@{/js/myJs/myEchart.js}"></script>-->
    <script>
        var app = new Vue({
            data: {
                myChart:"",
                myChart2:"",
                TodayDateInfo:"",
                top_num:5,
                word_frequency:[],
                loading: false,
                formLoading_abstract:true,
                formLoading_phrase:true,
                formLoading_keyWords:true,
                txt_info:{
                    abstract_num:200,
                    abstract:"",
                    phrase_num:10,
                    phrase:"",
                    keyWords_num:5,
                    keyWords:"",
                    seg:""
                }
            },
            mounted:function () {
                this.writeDateInfo();
                this.to_getAbstract()
                this.to_getPhrase()
                this.to_getKeyWords()
                this.to_getSeg()
            },
            created() {
                this.$nextTick(() => {
                    this.echart()
                    // this.to_getAbstract()
                    // this.to_getPhrase()
                    // this.to_getKeyWords()
                    // this.to_getSeg()
                })
            },
            watch: {
            },
            methods: {
                writeDateInfo : function(TodayDateInfo) {
                    mydate = new Date();
                    myweekday = mydate.getDay();
                    mymonth = mydate.getMonth() + 1;
                    myday = mydate.getDate();
                    myyear = mydate.getYear();
                    year = (myyear > 200) ? myyear : 1900 + myyear;
                    if (myweekday == 0)
                        weekday = " 星期日";
                    else if (myweekday == 1)
                        weekday = " 星期一";
                    else if (myweekday == 2)
                        weekday = " 星期二";
                    else if (myweekday == 3)
                        weekday = " 星期三";
                    else if (myweekday == 4)
                        weekday = " 星期四";
                    else if (myweekday == 5)
                        weekday = " 星期五";
                    else if (myweekday == 6)
                        weekday = " 星期六";
                    this.TodayDateInfo =year + "年" + mymonth + "月" + myday + "日" + weekday;
                },
                to_wordDemoFun:function(){
                    this.echart()
                },
                echart:function () {
                    let myChart = echarts.init(document.getElementById('main1'));
                    let myChart2 = echarts.init(document.getElementById('main1'));
                    myChart.showLoading({
                        text: '统计中，请稍候...'
                        , maskColor: 'rgba(3,3,8,0.5)',
                        textColor: '#fff600'
                    });
                    myChart2.showLoading({
                        text: '统计中，请稍候...'
                        , maskColor: 'rgba(3,3,8,0.5)',
                        textColor: '#fff600'
                    });
                    this.getcip()
                },
                getcip:function () {
                    this.word_frequency=[]
                    const _this = this
                    axios({
                        method: 'post',
                        url: apiUrl+'/base/wordDemoFun',
                        data: {
                            "top_num":_this.top_num
                        }
                    }).then((res) => {//回调函数
                        if(res.data.status == 0) {
                            this.$notify({
                                title: '词频成功',
                                type: 'success',
                                duration: 2500
                            })
                            let myChart = echarts.init(document.getElementById('main1'));
                            let myChart2 = echarts.init(document.getElementById('main2'));
                            let demoWord_frequency = res.data.data
                            demoWord_frequency.forEach(x =>{
                                    let item = {
                                        value:x.frequency, name:x.word
                                    }
                                    this.word_frequency.push(item)
                                })
                            _this.loading=true
                            let myChartdata = _this.word_frequency
                            let colorList =[]
                            let x_data=[]
                            let y_data=[]
                            myChartdata.forEach(x =>{
                                colorList.push(_this.getColor())
                                x_data.push(x.name)
                                y_data.push(x.value)
                            })
                            let option1 = {
                                backgroundColor: '#0f375f',
                                title: {
                                    text: '词频统计',
                                    left: 'center',
                                    top: 20,
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },

                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },

                                visualMap: {
                                    show: false,
                                    min: 80,
                                    max: 600,
                                    inRange: {
                                        colorLightness: [0, 1]
                                    }
                                },
                                series : [
                                    {
                                        name:'词频统计',
                                        type:'pie',
                                        radius : '55%',
                                        center: ['50%', '50%'],
                                        data:myChartdata.sort(function (a, b) { return a.value - b.value}),
                                        roseType: 'angle',
                                        label: {
                                            normal: {
                                                textStyle: {
                                                    color: 'rgba(255, 255, 255, 0.3)'
                                                }
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                lineStyle: {
                                                    color: 'rgba(255, 255, 255, 0.3)'
                                                },
                                                smooth: 0.2,
                                                length: 10,
                                                length2: 20
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: '#c23531',
                                                shadowBlur: 200,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            myChart.setOption(option1);
                            myChart.hideLoading();
                            let option2 = {
                                backgroundColor: '#0f375f',
                                color: colorList,
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                xAxis: [{
                                    type: 'category',
                                    data: x_data,
                                    axisTick: {
                                        show: false,
                                        alignWithLabel: true
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: '#01FCE3'
                                        }
                                    },
                                    axisLabel: {
                                        color: '#01FCE3'
                                    }
                                }],
                                yAxis: {
                                    type: 'value',
                                    axisLine: {
                                        lineStyle: {
                                            color: '#01FCE3'
                                        }
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    splitLine: {
                                        show: false
                                    },
                                    axisLabel: {
                                        color: '#01FCE3'
                                    }
                                },
                                series: [
                                    {
                                        type: 'pictorialBar',
                                        animation: true,
                                        animationDuration: 600,
                                        symbol: 'rect',
                                        symbolRepeat: true,
                                        symbolSize: [25, 4],
                                        symbolMargin: 1,
                                        barWidth: '60%',
                                        itemStyle: {
                                            normal: {
                                                color: function(params) {
                                                    return colorList[params.dataIndex]
                                                },
                                                label: {
                                                    show: false
                                                }
                                            }
                                        },
                                        data: y_data
                                    }
                                ]
                            };
                            myChart2.setOption(option2);
                            myChart2.hideLoading();
                        }else {
                            this.$notify({
                                title: '词频失败',
                                type: 'info',
                                duration: 2500
                            });
                        }
                    });
                },
                getColor:function(){
                    return '#'+(Math.random()*0xffffff<<0).toString(16);
                },
                to_getAbstract:function () {
                    const _this = this
                    this.txt_info.abstract=""
                    this.formLoading_abstract=true
                    axios({
                        method: 'post',
                        url: apiUrl+'/base/to_getAbstract',
                        data: {
                            "length":_this.txt_info.abstract_num
                        }
                    }).then((res) => {//回调函数
                        if(res.data.status == 0) {
                            this.$notify({
                                title: '摘要成功',
                                type: 'success',
                                duration: 2500
                            })
                            _this.txt_info.abstract = res.data.msg.toString()
                            _this.formLoading_abstract=false

                        }else {
                            this.$notify({
                                title: '摘要失败',
                                type: 'info',
                                duration: 2500
                            });
                        }
                    }).catch(function(error){
                        this.$notify.error({
                            title: '错误',
                            message: '摘要错误'
                        });
                    })
                },
                to_getPhrase:function () {
                    const _this = this
                    this.formLoading_phrase=true
                    this.txt_info.phrase=""
                    axios({
                        method: 'post',
                        url: apiUrl+'/base/to_getPhrase',
                        data: {
                            "num":_this.txt_info.phrase_num
                        }
                    }).then((res) => {//回调函数
                        if(res.data.status == 0) {
                            this.$notify({
                                title: '短语成功',
                                type: 'success',
                                duration: 2500
                            })
                            _this.txt_info.phrase = res.data.data.toString()
                            _this.formLoading_phrase=false
                        }else {
                            this.$notify({
                                title: '短语失败',
                                type: 'info',
                                duration: 2500
                            });
                        }
                    }).catch(function(error){
                        this.$notify.error({
                            title: '错误',
                            message: '短语错误'
                        });
                    })
                },
                to_getKeyWords:function () {
                    const _this = this
                    this.formLoading_keyWords=true
                    this.txt_info.keyWords=""
                    axios({
                        method: 'post',
                        url: apiUrl+'/base/to_getKeyWords',
                        data: {
                            "num":_this.txt_info.keyWords_num
                        }
                    }).then((res) => {//回调函数
                        if(res.data.status == 0) {
                            this.$notify({
                                title: '关键字成功',
                                type: 'success',
                                duration: 2500
                            })
                            _this.txt_info.keyWords = res.data.data.toString()
                            _this.formLoading_keyWords=false
                        }else {
                            this.$notify({
                                title: '关键字失败',
                                type: 'info',
                                duration: 2500
                            });
                        }
                    }).catch(function(error){
                        this.$notify.error({
                            title: '错误',
                            message: '关键字错误'
                        });
                    })
                },
                to_getSeg:function () {
                    const _this = this
                    this.txt_info.seg=""
                    axios({
                        method: 'post',
                        url: apiUrl+'/base/to_getSeg',
                    }).then((res) => {//回调函数
                        if(res.data.status == 0) {
                            this.$notify({
                                title: '名称成功',
                                type: 'success',
                                duration: 2500
                            })
                            _this.txt_info.seg = JSON.stringify(res.data.data)
                        }else {
                            this.$notify({
                                title: '名称失败',
                                type: 'info',
                                duration: 2500
                            });
                        }
                    }).catch(function(error){
                        this.$notify.error({
                            title: '错误',
                            message: '名称错误'
                        });
                    })
                }

            }
        });
        app.$mount("#app");
    </script>

</html>